<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext(
                "2d"
            );
            //绘制描边矩形1
            cxt.strokeStyle = "red";
            cxt.rect(50, 50, 80, 80);
            cxt.stroke();
            // 绘制描边矩形2
            cxt.strokeStyle = "rgb(0,255,0)";
            cxt.strokeRect(100, 100, 80, 80)

            //绘制填充矩形1
            cxt.fillStyle = "#FFE8E8";
            cxt.rect(50, 50, 80, 80);
            cxt.fill();
            //绘制填充矩形2
            cxt.fillStyle = "rgba(0,0,255,0.3)";
            cxt.fillRect(100, 100, 80, 80);
        }
    </script>
</head>

<body>
    <!-- 

        使用strokeRect()、fillRect()和rect()这3种方法都可以画矩形。这3种方法的参数设置是相同的，不同之处在于实现效果。
        其中，strokeRect()和fillRect()这两个方法在被调用之后，会立即把矩形绘制出来。
        而rect()方法在被调用之后，并不会立即把矩形绘制出来。只有在使用rect()方法之后再调用stroke()或fill()方法，才会把矩形绘制出来。

     -->
    <canvas id="canvas" width="300" height="300" style="border:1px dashed gray;"></canvas>
</body>

</html>